<!--
 * @Author: your name
 * @Date: 2022-04-20 08:47:32
 * @LastEditTime: 2022-04-20 09:14:14
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \2202\二阶段学习\开源\src\消灭星星\消灭星星（老师）.html
-->
<meta charset="UTF-8">
<style>
* {padding:0;margin:0}
body {background-color: orangered;}
</style>

<body>
    <div class="xuetiao" style="width:100px;height:50px;background:#fff">
        <div class="xue" style="width:100px;height:50px;background:red"></div>
    </div>
</body>

<script>
// 一、随机出现星星
// 需求： 每隔3s 造出一个星星img标签追加到页面
// 1 写定时器setInterval
// setInterval(两个实参第一个函数类型第二个数值类型)
// setInterval(function() {}, 3000)
setInterval(function() {
    // ### 出现星星
    // 2 定时器函数中：造星星追加到页面（位置随机）
    // 2.1 造星星
    var imgObj = document.createElement('img')
    imgObj.src = 'star.gif'
    // 2.2 随机：宽度高度
    var min = 20
    var max = 40
    var temp =  Math.floor( Math.random()* (max-min+1)+min)
    imgObj.width = temp
    // 2.3 随机：位置
    var leftMin = 0
    var leftMax = (window.innerWidth || document.documentElement.clientWidth) - temp
    var left =  Math.floor( Math.random()* (leftMax-leftMin+1)+leftMin)
    var topMin = 0
    var topMax = (window.innerHeight || document.documentElement.clientHeight) - temp
    var top =  Math.floor( Math.random()* (topMax-topMin+1)+topMin)
    imgObj.style.position = 'absolute'
    imgObj.style.left = left + 'px'
    imgObj.style.top = top + 'px'
    // 2.4 追加到页面
    document.body.appendChild(imgObj)
}, 3000)

// 二、点击删除星星
// 1 获取body并且绑定点击事件
document.body.onclick = function(evt) {
    // 2 事件处理函数中：删除星星   获取父标签body.removeChild(当前点击星星)
    // 2.1 获取事件对象
    var e = evt || window.event
    // 2.2 获取操作的标签
    var target = e.target || e.srcElement 
    // console.log(target)
    // 2.3 移出
    if (target.nodeName === 'IMG')
    {
        document.body.removeChild(target)

        // 血条+1
        var xue = parseInt(document.querySelector('.xue').style.width)
        if (xue+1 !==100)
        {
            document.querySelector('.xue').style.width = xue+1 + 'px'
        }
    }
}

// 三、血条
setInterval(function() {
    // ### 血-1
    var xue = parseInt(document.querySelector('.xue').style.width)
    document.querySelector('.xue').style.width = xue-1 + 'px'
}, 1000)
</script>